<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>B站视频合并工具</title>
    <!-- 导入指定的JavaScript文件 -->
    <script src="../base1/cockpit.js"></script>
    <script src="../manifests.js"></script>
    <link rel="stylesheet" href="index.css" />
</head>
<body>
    <header>
        <h1>B站视频合并工具</h1>
        <p class="subtitle">合并服务器上的B站视频资源</p>
        <div class="resource-path">
            资源路径: $HOME/resources/Downloads/下来自手机bilibili离线下载的目录
        </div>
    </header>
    
    <div class="container">
        <div class="table-container">
            <div class="table-header">
                <h2>待合并视频列表</h2>
            </div>
            <table>
                <thead>
                    <tr>
                        <th>视频标题</th>
                        <th>文件地址</th>
                    </tr>
                </thead>
                <tbody id="videoTableBody">
                </tbody>
            </table>
        </div>
        
        <div class="button-container">
            <button class="merge-btn" id="mergeButton">开始合并</button>
            <div class="status" id="statusInfo">
                准备就绪，可以开始合并视频
            </div>
            
            <div class="cockpit-status">
                <b id="progress"></b>
            </div>
            
            <div class="instructions">
                <h3>使用说明</h3>
                <p>1. 视频资源来自服务器: $HOME/resources/Downloads/</p>
                <p>2. 点击"开始合并"按钮将合并所有视频文件</p>
                <p>3. 合并过程将通过cockpit.js与服务器交互</p>
            </div>
        </div>
    </div>
    
    <footer>
        <p>B站视频合并工具 &copy; kaxia_xia@126.com</p>
    </footer>
    <!-- 通过defer方式引入外部JS文件 -->
    <script src="index.js" defer></script>
</body>
</html>